import React from 'react';
import { Tabs,Tree } from 'antd';
import { listToTree } from '../common' ; 
const TabPane = Tabs.TabPane;
const TreeNode = Tree.TreeNode;
var _ = require('lodash');

import  './style.css' ;

class TabsMenu extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            activeKey:"1",
        }
    }

    onChange = (activeKey) => {
        this.setState({ activeKey });
    }

    onSelect = (selectedKeys, info) => {
        this.props.onSelect(this.state.activeKey,selectedKeys);
    }

    render(){
        const loop = data => Object.keys(data).map ( (item) => {
            let node = data[item];
            const title = node.name;
            if ( _.isEmpty(node.children) ) {
                return <TreeNode title={title} key={item} isLeaf={true}/>;
            }else {
                return <TreeNode title={title} key={item}>{loop(node.children)}</TreeNode>;
            }
        });

        const menu = this.props.sourceData.map((item) => {
            const data = listToTree(item.data ,{
                                idKey: 'id',
                                parentKey: 'parent_id',
                                childrenKey: 'children'
                            });
            return (<TabPane tab={item.name} key={item.key}>
                    <Tree
                        showLine 
                        onSelect={this.onSelect}
                    >
                            {loop( data )}
                    </Tree> 
            </TabPane>);
        });
        return(
            <div className="tabs-menu-component"> 
                <Tabs 
                    defaultActiveKey="1" 
                    onChange={this.onChange }
                    activeKey={this.state.activeKey} >
                    {menu}
                </Tabs>
            </div>
        );
    }
}


export default TabsMenu ;



